<template>
	<view>
		<!-- 拼团活动 -->
		<image src="/static/images/拼团.png" style="width: 100%;height: 22vh;"></image>
		<view class="whole">
			<view class="Head">
				<view class="top">
					<text style="color: #8C5A11;margin-left: 6%;">团长：王晶晶</text><text
						style="color: #FEF8E6;margin-left: 15%;">正在进行中</text>
				</view>
				<view style="margin-top: 30rpx;display: flex;margin-left: 50rpx;">
					<image src="/static/images/拼团-正在进行.png" style="width: 180rpx;height: 240rpx;"></image>
					<view class="Head_text">
						<text>已有<text style="color: red;">4</text>人参团，仅差<text style="color: red;">2</text>人</text>
						<view style="margin-top: 40rpx;">
							<ai-progress :percentage="66" bg-color="#F54F3B" :noData="true"></ai-progress>
						</view>
						<view style="margin-top: 40rpx;display: flex;">
							<uni-countdown color="#FFFFFF" background-color="red" border-color="red" :showDay="false"
								:hour="2" :minute="30" :second="0"></uni-countdown>
							<text style="margin-left: 3%;">后结束</text>
						</view>
						<view class="">
							<button type="default" @click="button" class="button">查看详情</button>
						</view>
					</view>
				</view>
				<!-- 推存列表 -->
				<view class="list" v-for="(item,index) in 2" @click="listClick(item)"> 
					<image src="/static/images/拼团-推存.png"
						style="margin-left: 3%;width: 30%;margin-top: 1%;height: 89%;"></image>
					<view style="margin-top: 3vh;width: 65%;margin-left: 5%;">
						<view class="" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							【现货发顺丰6期免息】vivo x600000000
						</view>
						<view
							style="width: 150rpx;height: 15px;font-size: 18rpx;margin-top: 30rpx; border: solid #D7765A 2px;text-align: center;border-radius: 8rpx;">
							<image src="/static/images/人-多人.png" style="width: 40rpx;height: 20rpx;"></image>
							<text>2人团</text>
						</view>
						<view class="" style="margin-top: 30rpx;display: flex;">
							<text style="font-size: 25rpx;font-weight: 600;">￥</text>
							<text style="font-size: 35rpx;font-weight: 600;">1.00</text>
							<text style="text-decoration: line-through;color: #565;">￥576.00</text>
							<view class="but" style="">
								去拼团 <text style="margin-left: 5%;">></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: false
			}
		},
		methods: {
			button(){
				//在起始页面跳转到ViewDetails页面并传递参数
				uni.navigateTo({
				    url: '/pages/home/GroupActivities/ViewDetails/ViewDetails'
				});
			},
			// 跳转商品详情
			listClick(item){
				console.log(item)
				uni.navigateTo({
				    url: './ViewDetails/GroupDetails/GroupDetails'
				});
			}
		}
	}
</script>

<style scoped>
	.button {
		width: 350rpx;
		border-radius: 50rpx;
		color: #fff;
		background-color: red;
		margin-top: 20rpx;
	}

	.but {
		margin-left: 10%;
		color: #fff;
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: red;
		line-height: 60rpx;
		text-align: center;
	}

	.list {
		margin-top: 50rpx;
		margin-left: 3%;
		height: 20vh;
		width: 95%;
		display: flex;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.Head_text {
		margin-left: 50rpx;
	}

	.top {
		height: 8vh;
		border-radius: 20rpx 20rpx 0 0;
		line-height: 8vh;
		background-color: #FBC121;
	}

	.Head {
		width: 95%;
		height: 35vh;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 3%;
	}

	.whole {
		width: 100%;
		height: 80vh;
		margin-top: -8rpx;
		background-color: #F54F3B;
	}
</style>
